<template>
	<div @click="open">
		<view>
			<div class="content" :class="[disabled ? 'disabled' : '']">
				<div class="text">
					{{ currentLabel }}
				</div>

				<div class="icon" v-if="canSelect">
					<uni-icons v-if="canSelect" type="forward" size="18"></uni-icons>
				</div>
			</div>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff" @close="close" @maskClick="close">
				<div class="container">
					<!-- 搜索栏 -->
					<div class="topContainer">
						<div class="btn cancel" @click="cancel">取消</div>
						<div class="search">
							<uni-search-bar
								v-model="searchText"
								class="uni-mt-10"
								radius="5"
								placeholder="请输入过滤内容"
								clearButton="auto"
								cancelButton="none"
								@input="inputHandler" />
						</div>
						<div class="btn sure" @click="sure">确认</div>
					</div>
					<div class="options">
						<picker-view
							v-if="filterDictList.length > 0"
							:value="index"
							@change="bindChange"
							@pickstart="pickstart"
							@pickend="pickend"
							class="picker-view"
							:immediate-change="true"
							ref="pickerView">
							<picker-view-column>
								<view class="item" v-for="(item, index) in filterDictList">
									<div v-if="format">
										{{ format({ item }) }}
									</div>
									{{ item.text }}
								</view>
							</picker-view-column>
						</picker-view>
						<div v-else class="emptyContent">无数据</div>
					</div>
				</div>
			</uni-popup>
		</view>
	</div>
</template>

<script>
	export default {
		name: '',
		components: {},
		props: {
			value: {
				required: false,
			},
			state: {
				required: false,
			},
			disabled: {
				required: false,
			},
			dict: {
				required: false,
				default: () => {},
			},
			label: {
				required: false,
			},
			format: {
				required: false,
				type: Function,
			},
		},
		data() {
			return {
				index: [0],
				current: undefined,
				dictList: [],
				filterDictList: [],
				show: false,
				searchText: undefined,
				type: 'objectArr',
				scrolling: false,
			};
		},
		inject: ['state_provide'],
		computed: {
			currentLabel() {
				let current = this.dictList?.find(item => this.getDictValue(item) == this.value);
				let label = this.getDictLabel(current);
				let defaultLabel =
					this.state == 'write' || this.Empty(this.state)
						? `请选择${this.label ? this.label : '数据'}`
						: '-';
				let wrod = !label || label == '无' ? defaultLabel : label;
				return wrod;
			},

			dictValue() {
				return this.dict?.value ?? 'value';
			},
			dictLabel() {
				return this.dict?.label ?? 'label';
			},

			canSelect() {
				return (this.state == 'write' || this.Empty(this.state)) && this.disabled != true;
			},
		},
		created() {},
		watch: {
			value: {
				handler: function (val) {
					this.init();
				},
				deep: true,
				immediate: true,
			},
			dict: {
				handler: function (val) {
					this.initDict();
				},
				immediate: true,
			},
		},
		mounted() {},
		methods: {
			pickstart() {
				this.scrolling = true;
			},
			pickend() {
				this.scrolling = false;
			},
			close() {
				this.searchText = '';
				this.show = false;
				this.index = [0];
			},
			inputHandler(e) {
				if (this.Empty(this.searchText)) {
					this.filterDictList = this.dictList;
				}
				let list = this.dictList?.filter(item => {
					return this.getDictLabel(item).indexOf(this.searchText) !== -1;
				});
				this.filterDictList = list;
				this.$nextTick(() => {
					this.index = [0];
				});
			},
			open() {
				if (this.canSelect) {
					this.show = true;
					this.init();
					this.$refs.popup.open('bottom');
				}
			},

			init() {
				if (this.Empty(this.value)) {
					this.$nextTick(() => {
						this.index = [0];
					});
					return;
				}
				let index = this.dictList?.findIndex(e => this.getDictValue(e) == this.value);

				this.$nextTick(() => {
					this.index = [index];
				});
			},
			initDict() {
				if (Array.isArray(this.dict?.list) && this.dict?.list?.length > 0) {
					let dictList = this.A_deepClone(this.dict.list ?? []);
					if (typeof dictList[0] !== 'object') {
						this.type = 'stringArr';
						dictList = [];
						this.dict?.list?.map(item => {
							dictList.push({
								value: item,
								text: item,
							});
						});
					}

					let index = dictList.findIndex(e => this.getDictLabel(e) == '无');
					if (index == -1) {
						let obj = {};
						obj[this.dict?.value ?? 'value'] = undefined;
						obj[this.dict?.label ?? 'label'] = '无';
						dictList.unshift(obj);
					}
					dictList?.map(item => {
						item.text = this.getDictLabel(item);
						item.value = this.getDictValue(item);
					});
					this.dictList = dictList;
					this.filterDictList = dictList;
					this.init();
				}
			},
			bindChange(e) {
				this.pickend();
				this.index = e.detail.value;
				this.$emit('bindChange', this.dict.list?.[e.detail.value]);
			},
			sure() {
				// if (this.scrolling) return;
				this.current = this.filterDictList?.[this.index[0]];
				let val = this.getDictValue(this.current);
				this.$emit('change', {
					val: val == '无' ? undefined : val,
					item: this.current ?? {},
				});
				this.$emit('input', val);
				this.$refs.popup.close();
				this.$nextTick(() => {
					this.close();
				});
			},
			cancel() {
				this.$refs.popup.close();
				this.close();
			},
			getDictLabel(data) {
				if (typeof data !== 'object') {
					return data;
				}
				return data?.[this.dict?.label] ?? data?.dictLabel ?? data?.label ?? data?.text;
			},
			getDictValue(data) {
				if (typeof data !== 'object') {
					return data;
				}
				return data?.[this.dict?.value] ?? data?.dictValue ?? data?.value;
			},
		},
		beforeDestroy() {
			this.index = 0;
		},
	};
</script>

<style lang="scss" scoped>
	.uni-input {
		line-height: 30rpx;
		margin-left: 10rpx;
	}
	.container {
		padding: 20rpx 20rpx 0 20rpx;
		.topContainer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.search {
				flex: 1;
			}
			.cancel {
				padding-right: 10rpx;
			}
			.sure {
				padding-left: 10rpx;
			}
		}
		.options {
			display: flex;
			flex-direction: column;
			gap: 0 20rpx;
			.item {
				text-align: center;
			}
			.picker-view {
				width: 750rpx;
				height: 400rpx;
				margin-top: 20rpx;
			}
			.emptyContent {
				width: 750rpx;
				height: 400rpx;
				margin-top: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	.content {
		// min-height: 32px;
		display: flex;
		// align-items: center;
		.text {
			flex: 1;
			min-width: 0;
		}
		.icon {
			margin-left: 15rpx;
		}
	}
	.disabled {
		color: #606266;
	}
</style>
